<template>
	<div class="user_detail">
		<div style="position: sticky; top: 0">
			<header>
				<div class="top">
					<van-image class="avatar" round width="60px" height="60px" fit="cover" :src="state.headImgUrl" />
					<div v-if="state.type != 'stores'" class="user_info">
						<div class="info">
							<div>
								<span>{{ info.username }}</span>
								<img v-if="showVip(info)" class="vip" src="@/assets/img/vip_icon.png" />
								<img v-if="info.is_vip_video" class="certification" src="@/assets/img/certification_icon.png" />
							</div>
              <img v-if="!state.share_user_id" src="@/assets/img/share_icon.png" @click="state.codeDialogShow = true" />
						</div>
						<p class="info">
							{{ info.age }}岁 {{ info.height }}cm {{ info.job }} {{ info.income }}
						</p>
						<p>{{ info.province }} {{ info.city }} {{ info.area }}</p>
					</div>
          <div v-else class="user_info">
            <div class="info">
              <div>
                <span>{{ state.store.title }}</span>
              </div>
              <img v-if="!state.share_user_id" src="@/assets/img/share_icon.png" @click="state.codeDialogShow = true" />
            </div>
            <p>{{state.store.address}}</p>
          </div>
				</div>
				<div class="bottom">
					<div class="left">
						<div>
							<span>{{ info.like_num }}</span>
							<div>喜欢</div>
						</div>
						<div>
							<span>{{ info.fans_num }}</span>
							<div>粉丝</div>
						</div>
					</div>
					<div class="right">
						<img v-debounce="collect" src="@/assets/img/lick_btn.png" />
						<a :href="state.mobile">
							<img style="margin-left: 15px; vertical-align: bottom" src="@/assets/img/tel_btn_new.png" />
						</a>
					</div>
				</div>
			</header>

			<van-tabs v-model:active="state.active" line-width="20px" title-inactive-color="#484848">
				<van-tab v-for="item of state.tabs" :title="item" :key="item"></van-tab>
			</van-tabs>
		</div>

		<main>
			<div class="content">
				<template v-if="state.active === 1">
					<van-list
						class="list"
						v-model:loading="state.loading"
						:finished="state.finished"
						finished-text="没有更多了"
						@load="onLoad"
					>
						<div class="img_list">
							<template v-for="(item,index) of state.photoList" :key="item">
                <div class="list_item">
                  <img v-lazy="item" v-if="!index && showVideo(info)" />
                  <img v-lazy="item" v-else @click="imgPreview(item)">
                  <!-- 播放按钮 -->
                  <img v-if="!index && showVideo(info)" class="vider_playicon" src="@/assets/img/play.png" @click="playVideo()" />
                </div>
							</template>
						</div>
					</van-list>
				</template>
				<template v-else>
					<div class="card">
            <div v-if="state.type === 'stores'">
              <div class="card_item">
                <div class="title"><span class="t_block"></span>服务宣言</div>
                <div class="card_content">
                  <div>
                    <span>{{ info.fwxy || '无' }}</span>
                  </div>
                </div>
              </div>
              <div class="card_item">
                <div class="title"><span class="t_block"></span>基本条件</div>
                <div class="card_content">
                  <div>
                    <span>{{ state.store.title }}</span>
                  </div>
                  <div>
                    <span>{{state.store.mobile}}</span>
                  </div>
                  <div>
                    <span>营业时间：{{ state.store.open_time }}</span>
                  </div>
                  <div>
                    <span>店铺地址：{{ state.store.address }}</span>
                  </div>
                </div>
              </div>
              <div class="card_item">
                <div class="title"><span class="t_block"></span>优惠活动</div>
                <div class="card_content">
                  <div>
                    <span>{{ info.yhhd || '无' }}</span>
                  </div>
                </div>
              </div>
            </div>
						<div v-else>
              <div class="card_item">
                <div class="title"><span class="t_block"></span>基本条件</div>
                <div class="card_content">
                  <div>
                    <span>性别：{{ info.sex }}</span>
                    <span>年龄：{{ info.age }}岁</span>
                    <span>生日：{{ info.birthday }}</span>
                  </div>
                  <div>
                    <span>居住地址：{{ info.province }}-{{ info.city }}-{{ info.area }}-{{ info.address }}</span>
                  </div>
                  <div>
                    <span>月收入：{{ info.income }}</span>
                    <span>学历：{{ info.educate }}</span>
                  </div>
                  <div>
                    <span>身高：{{ info.height }}cm</span>
                    <span>体重：{{ info.weight }}kg</span>
                  </div>
                  <div>
                    <span>婚姻状况：{{ info.marriage }}</span>
                  </div>
                  <div>
                    <span>是否想要孩子：{{ info.want_children }}</span>
                    <span>有无孩子：{{ info.is_children }}</span>
                  </div>
                  <div>
                    <span>是否有房：{{ info.is_house }}</span>
                    <span>是否有车：{{ info.is_car }}</span>
                  </div>
                </div>
              </div>
              <div class="card_item">
                <div class="title"><span class="t_block"></span>恋爱宣言</div>
                <div class="card_content">
                  <div>
                    <span>{{ info.love_content || '无' }}</span>
                  </div>
                </div>
              </div>
              <div class="card_item">
                <div class="title"><span class="t_block"></span>择偶条件</div>
                <div class="card_content">
                  <div>
                    <span>{{ info.choose_spouse || '无' }}</span>
                  </div>
                </div>
              </div>
              <div class="card_item">
                <div class="title"><span class="t_block"></span>兴趣爱好</div>
                <div class="card_content">
                  <div>
                    <span>{{ info.hobby || '无' }}</span>
                  </div>
                </div>
              </div>
            </div>
					</div>
				</template>
			</div>
		</main>
	</div>

  <MyTabbar />

  <van-popup v-model:show="show" :closeable="state.closeable" close-icon="close"  style="background: none" @close="popupClose">
    <div class="popup_content">
      <video ref="videoRef"
             controls
             webkit-playsinline
             playsinline
             disablePictureInPicture="true"
             controlslist="nodownload noremoteplayback"
             :src="state.videoSrc"></video>
    </div>
  </van-popup>

  <!-- 开通套餐会员弹窗 -->
  <vipPopup ref="vipPopupRef" @openVipPackage="openVipPackage" />

  <!-- 分享说明 -->
  <MyDialogBtn v-model:show="state.codeDialogShow" column>
    <template #content>
      <div style="max-height: 50vh; overflow: scroll">
        <div style="margin-bottom: 30px">分享说明</div>
        <p v-html="state.promote_contents" style="font-size: 13px; text-align: left; line-height: 24px"></p>
      </div>
    </template>
    <template #btn>
      <van-button type="primary" @click="state.codeDialogShow = false">确定</van-button>
    </template>
  </MyDialogBtn>

  <!-- 一元付费弹窗 -->
  <MyDialogBtn v-model:show="state.payShow" column>
    <template #content>
      <div>观看本视频需付费一元 观看，或成为平台VIP用户即可 享受全部免费观看！</div>
    </template>
    <template #btn>
      <van-button type="primary" @click="payOneYuan">付费一元</van-button>
      <van-button type="success" @click="becomeVip">成为VIP</van-button>
      <van-button type="success" @click="state.payShow = false">取消</van-button>
    </template>
  </MyDialogBtn>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, toRefs, computed, nextTick} from 'vue';
import {useRoute, onBeforeRouteLeave, useRouter} from 'vue-router';
import { useMainStore } from '@/store/index';
import {
  addUser,
  bindUserRelate,
  editUser,
  getAddressByGPS,
  memberInfo,
  opendIdByCode,
  wxPay,
  wxVipPay
} from '@/api/common';
import {
  checkUserStateByOneYuan,
  createOneYuanOrder,
  createVipOrder,
  saveBrowseRecord,
  saveCollect,
  updateShareCount
} from '@/api/index';
import {Toast, ToastOptions} from 'vant';
import wxApiReady from '@/hooks/wxApiReady';
import wx from 'weixin-jsapi';
import showVip from '@/hooks/showVip';
import MyDialogBtn from '@/components/MyDialogBtn.vue';
import {getQueryString} from "@/utils/util";
import useAuthorize from "@/hooks/authorize";
import MyTabbar from '@/components/MyTabbar.vue';
import vipPopup from "@/views/index/components/vipPopup.vue";

const imgUrl = import.meta.env.VITE_IMG_URL;
const siteTitle = import.meta.env.VITE_SITE_TITLE;
const siteDomain = import.meta.env.VITE_DOMAIN;
const mainStore = useMainStore();
const route = useRoute();
const router = useRouter();
const state = reactive<any>({
	type: route.query.type || '',
  codeDialogShow: false,
  promote_contents:'',
	active: 0,
	loading: true,
	finished: true,
  closeable: true,
	tabs: ['信息', '相册'],
	user_id: route.query.user_id || 0,
  share_user_id: route.query.share_user_id || '',
	info: {},
  store: {},
	photoList: [],
	mobile: 'javascript:;',
  province: '',
  city: '',
  country: '',
  videoSrc: '',
  shareDesc: '',
  headImgUrl: '',
  payShow: false,
});
const { info } = toRefs(state);

const checkRoles = (identity:string,key: string): boolean => {
  return String(identity).split(',').includes(key);
};

// 当被分享人打开此页面，展示视频
const showVideo = (info:any):boolean => {
  let flag = false;
  if (state.share_user_id) {
    if (typeof info.vcr.video_url != 'undefined') {
      flag = true
    } else if (typeof info.red_mother_vcr.video_url != 'undefined') {
      flag = true
    } else if (typeof info.store_auth_vcr.video_url != 'undefined') {
      flag = true
    }
  }
  return flag;
}

let show = ref(false);
const videoRef = ref<HTMLVideoElement | null>(null);

// 打开视频弹窗
const playVideo = async () => {
  if (typeof mainStore.userInfo.audit_state != 'undefined' && mainStore.userInfo.audit_state != 1) {
    if (mainStore.userInfo.audit_state == 0) return Toast('您的资料正在审核中');
    if (mainStore.userInfo.audit_state == 2) return Toast('您的资料审核未通过');
  } else {
    if (!mainStore.userInfo.identity || mainStore.userInfo.identity == '0') {
      router.push('/registered');
      return;
    }
  }
  // 单次付费看视频支付前的检查
  const res = await checkUserStateByOneYuan(mainStore.user_id, state.user_id);
  if (res.errorCode == 0) {
    state.payShow = true;
  } else if (res.errorCode == 1) {
    show.value = true;
    await nextTick(() => {
      videoRef.value?.play();
    })
  } else {
    Toast(res.errorInfo);
  }
};

// 弹窗关闭 暂停视频
const popupClose = async () => {
  show.value = false
  if (!videoRef.value?.paused) {
    await nextTick(() => {
      videoRef.value?.pause();
    })
  }
};

onMounted(async () => {
  await getMemberInfo();
  mainStore.isShare = !!route.query.share_user_id;
  // 保存推广码分享id
  if (route.query.parent_id) mainStore.parent_id = (route.query.parent_id as string) || null;
  if (mainStore.userInfo == null) return getUserInfo();
  await bindMatchmakerRelate();
});

// 绑定关系
const bindMatchmakerRelate = async (): Promise<void> => {
  if (!mainStore.parent_id) return;
  const open_id = mainStore.userInfo.open_id || mainStore.userInfo.openid;
  await bindUserRelate(open_id, mainStore.parent_id);
};

// 获取用户信息
const getUserInfo = async (): Promise<void | string> => {
  const code = getQueryString('code');
  if (!code) {
    return useAuthorize();
  }
  const res = await opendIdByCode(code);
  if (res.errorCode == 0) {
    const userRes = await memberInfo(res.data.userInfo.id);
    if (userRes.data) {
      mainStore.userInfo = userRes.data;
    } else {
      mainStore.userInfo = res.data.userInfo;
    }
    await bindMatchmakerRelate();
    setTimeout(async ()=>{
      getMemberListBuyCity().catch((err) => console.log(err));
      const userRes = await editUser(formUserData(res.data.openid));
      mainStore.userInfo = userRes.data;
    },1000)
  }
  else if (res.errorCode == 1) {
    return useAuthorize();
  }
  else {
    setTimeout(async ()=>{
      await getMemberListBuyCity().catch((err) => console.log(err));
      const userRes = await addUser(formUserData(res.data.openid));
      mainStore.userInfo = userRes.data;
      await bindMatchmakerRelate();
    },1000)
  }
};

const formUserData = (data:any):any => {
  const { openid, nickname, headimgurl, country, province, sex } = data;
  return {
    parent_id: mainStore.parent_id || '',
    opendId: openid,
    nickName: nickname,
    avatarUrl: headimgurl,
    gender: sex,
    province: state.province,
    city: state.city,
    country: state.country
  };
}

// 定位城市获取列表
const getMemberListBuyCity = (): Promise<void> => {
  return new Promise<void>((resolve, reject) => {
    // 获取城市
    wxApiReady(['getLocation'])
        .then((res) => {
          wx.getLocation({
            type: 'wgs84',
            success: async (res: any) => {
              const { latitude, longitude } = res;
              const addressRes = await getAddressByGPS(latitude, longitude);
              const { city, district, province } = addressRes.data.result.address_component;
              state.city = city;
              state.province = province;
              state.country = district;
              resolve();
            },
            complete: (res: any) => {
            }
          });
        })
        .catch((err: Error) => {

        });
  });
};

// 喜欢
const collect = async () => {
  if (typeof mainStore.userInfo.audit_state != 'undefined' && mainStore.userInfo.audit_state != 1) {
    if (mainStore.userInfo.audit_state == 0) return Toast('您的资料正在审核中');
    if (mainStore.userInfo.audit_state == 2) return Toast('您的资料审核未通过');
  } else {
    if (!mainStore.userInfo.identity || mainStore.userInfo.identity == '0') {
      router.push('/registered');
      return;
    }
    const res = await saveCollect(mainStore.user_id, state.user_id);
    Toast(res.errorInfo);
    await getMemberInfo();
  }
};

// 预览图片
const imgPreview = (item: string) => {
	wxApiReady(['previewImage'])
		.then((res) => {
			wx.previewImage({
				current: item, // 当前显示图片的 http 链接
				urls: state.photoList // 需要预览的图片 http 链接列表
			});
		})
		.catch((err) => console.log(err));
};

const initShare = async () => {
	wxApiReady(['onMenuShareAppMessage', 'onMenuShareTimeline'])
		.then((res) => {
			wx.onMenuShareAppMessage({
				title: siteTitle, // 分享标题
				//desc: state.info.username, // 分享描述
				desc: state.shareDesc, // 分享描述
				link: 'https://ztcy.huimaibuy.com/h5/#/userDetail?parent_id='+mainStore.user_id+'&user_id='+state.user_id+'&type='+state.type+'&share_user_id='+mainStore.user_id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
				imgUrl: state.headImgUrl, // 分享图标
				type: 'link', // 分享类型,music、video或link，不填默认为link
				dataUrl: '', // 如果 type 是music或video，则要提供数据链接，默认为空
				success: async () => {
					// 用户点击了分享后执行的回调函数
					// 更新转发数量
					const res = await updateShareCount(state.info.user_id);
					console.log(res);
				},
				cancel: (res: any) => {
					console.log(res);
				}
			});
			wx.onMenuShareTimeline({
				title: siteTitle, // 分享标题
        link: 'https://ztcy.huimaibuy.com/h5/#/userDetail?parent_id='+mainStore.user_id+'&user_id='+state.user_id+'&type='+state.type+'&share_user_id='+mainStore.user_id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
				imgUrl: state.headImgUrl, // 分享图标
				success: async () => {
					// 用户点击了分享后执行的回调函数
					// 更新转发数量
					const res = await updateShareCount(state.info.user_id);
					console.log(res);
				},
				cancel: (res: any) => {
					console.log(res);
				}
			});
		})
		.catch((err) => console.log(err));
};

// 获取用户信息
const getMemberInfo = async () => {
	const res = await memberInfo(state.user_id,state.share_user_id);
  console.log(res)
  // 同步旧数据
  if (res.data.is_children == '0' || res.data.is_children == '1') {
    if (res.data.is_children == '0') res.data.is_children = '无'
    if (res.data.is_children == '1') res.data.is_children = '有'
  }
  if (res.data.want_children == '0' || res.data.want_children == '1') {
    if (res.data.want_children == '0') res.data.want_children = '不想'
    if (res.data.want_children == '1') res.data.want_children = '想'
  }
	state.info = res.data;
  state.store = res.data.store;
  state.photoList = '';
  if (state.type === 'stores') {
    if (res.data.store.mobile == null) {
      state.mobile = `tel:${res.data.mobile}`;
    } else {
      state.mobile = `tel:${res.data.store.mobile}`;
    }
    state.photoList = res.data.store.photo_list.map((item: string): string => {
      return imgUrl + item;
    });
  } else {
    state.mobile = `tel:${res.data.mobile}`;
    // 判断用户是否存在个人照片
    if (typeof res.data.photo_list != 'undefined') {
      state.photoList = res.data.photo_list.map((item: string): string => {
        return imgUrl + item;
      });
    }
  }

  // 头像显示
  if (state.store.storeimgs) {
    state.headImgUrl = imgUrl + state.store.storeimgs
  } else {
    if (!state.head_img_url) {
      state.headImgUrl = state.photoList[0]
    } else {
      state.headImgUrl = state.head_img_url
    }
  }

  if (state.type == 'user') {
    state.promote_contents = '点击右上角【...】分享到朋友圈或微信群：<br/>' +
        '①可成为注册会员推荐人；<br/>' +
        '②获得视频付费观看40%收益。'
  } else {
    state.promote_contents = '点击右上角【...】分享到朋友圈或微信群'
  }

  if (checkRoles(state.info.identity,'4')) {
    state.shareDesc = `【${state.info.username}】门店，实名相亲，为您牵线。`
  } else if (checkRoles(state.info.identity,'3')) {
    state.shareDesc = `我是【${state.info.username}】，实名相亲，为您牵线。`
  } else {
    state.shareDesc = `我是【${state.info.username}】，实名相亲，等待牵手。`
  }

  // 存在分享用户
  if (state.share_user_id) {
    // 根据用户身份，判断用户是否是视频认证并展示视频
    if (checkRoles(state.info.identity, '4')) {
      if (typeof state.info.store_auth_vcr.video_url != 'undefined') {
        (state.photoList).unshift(imgUrl + state.info.store_auth_vcr.imgs)
        state.videoSrc = imgUrl + state.info.store_auth_vcr.video_url
      }
    } else if (checkRoles(state.info.identity, '3')) {
      if (typeof state.info.red_mother_vcr.video_url != 'undefined') {
        (state.photoList).unshift(imgUrl + state.info.red_mother_vcr.imgs)
        state.videoSrc = imgUrl + state.info.red_mother_vcr.video_url
      }
    } else if (typeof state.info.vcr.video_url != 'undefined') {
      (state.photoList).unshift(imgUrl + state.info.vcr.imgs)
      state.videoSrc = imgUrl + state.info.vcr.video_url
    }
  }
	initShare();
};

// 成为vip
const vipPopupRef = ref<InstanceType<typeof vipPopup> | null>(null);
const becomeVip = () => {
  vipPopupRef.value!.showPopup();
};
// 开通vip套餐
const openVipPackage = async (currentPackage: any) => {
  const packageParams = {
    user_id: mainStore.user_id,
    vip_id: currentPackage.id,
    amount: currentPackage.price
  };

  // 创建vip套餐订单
  const res = await createVipOrder(packageParams);
  const oid: number = res.data;
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
  });
  const params: any = await wxVipPay(oid);
  wxApiReady(['chooseWXPay'])
      .then((res) => {
        wx.chooseWXPay({
          timestamp: params.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
          nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位
          package: params.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: params.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
          paySign: params.paySign, // 支付签名
          success: async (result: object) => {
            // 支付成功后的回调函数
            console.log(result);
            Toast.success('支付成功');
            vipPopupRef.value!.closePopup();
          }
        });
      })
      .catch((err: Error) => console.log(err));
};

// 付费一元
const payOneYuan = async (): Promise<void | ToastOptions> => {
  const like_user_id = state.user_id;
  const share_user_id = state.share_user_id

  // 单次付费看视频订单
  const res = await createOneYuanOrder(mainStore.user_id, like_user_id, share_user_id);
  if (res.errorCode != 0) return Toast(res.errorInfo);
  const oid: number = res.data;
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
  });
  const params: any = await wxPay(oid);
  wxApiReady(['chooseWXPay'])
      .then((res) => {
        wx.chooseWXPay({
          timestamp: params.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
          nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位
          package: params.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: params.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
          paySign: params.paySign, // 支付签名
          success: async (result: object) => {
            // 支付成功后的回调函数
            console.log(result);
            state.payShow = false;
            Toast.success('支付成功');
            show.value = true;
            await nextTick(() => {
              videoRef.value?.play();
            })
            // 添加观看记录
            await saveBrowseRecord(mainStore.user_id, like_user_id);
          }
        });
      })
      .catch((err) => console.log(err));
};

const onLoad = () => {};
</script>

<style lang="scss" scoped>
:deep(.van-popup) {
  .van-icon {
    background: white;
    border-radius: 10px;
  }
}
:deep(.van-tabs) {
	width: 100%;
	.van-tabs__wrap {
		height: 55px !important;
		.van-tabs__nav {
			padding-left: 100px;
			padding-right: 100px;
			justify-content: space-between;
			.van-tab {
				flex: auto;
				padding: 0;
				font-size: 15px;
			}
			.van-tab--active {
				font-size: 16px;
				font-weight: bold;
			}
      .van-tabs__line {
				background: #f6438a;
			}
		}
	}
}
.popup_content {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    //border-radius: 20px;
  }
}
.user_detail {
	background: #f5f5f5;

	header {
		@include flx-direction-between;
		width: 100%;
		height: 175px;
		box-sizing: border-box;
		padding: 30px 15px 25px 15px;
		color: white;
		background-image: url('@/assets/img/user_bg.png');
		background-repeat: no-repeat;
		background-size: cover;
		.top {
			@include flx-align-center;
			.user_info {
				@include flx-direction-between;
				flex: 1;
				height: 60px;
				margin-left: 10px;
				.info {
					@include flx-justify-between;
					div {
						margin-bottom: 5px;
						font-size: 14px;
						font-weight: bold;
						.vip {
							width: 16px;
							height: 14px;
							margin-left: 10px;
							vertical-align: middle;
						}
						.certification {
							width: 54px;
							height: 20px;
							margin-left: 10px;
							vertical-align: middle;
						}
					}
					img {
						width: 20px;
						height: 20px;
					}
				}
				p {
					font-size: 12px;
				}
			}
		}
		.bottom {
			@include flx-justify-between;
			.left {
				@include flx-justify-between;
				width: 110px;
				padding: 0 15px;
				font-size: 12px;
				text-align: center;
				span {
					font-size: 17px;
					font-weight: bold;
				}
			}
			.right {
				@include flx-align-center;
				img {
					width: 63px;
					height: 28px;
				}
			}
		}
	}
	main {
		height: calc(100vh - 230px);
		overflow: scroll;
		.content {
			padding: 15px;
			.img_list {
				@include flx-justify-between;
        margin-bottom: 20px;
				flex-wrap: wrap;
				//img {
				//	width: 48%;
				//	height: 210px;
				//	margin-bottom: 15px;
				//	border-radius: 10px;
				//	object-fit: cover;
				//}
        .list_item {
          position: relative;
          width: 48%;
          height: 210px;
          margin-bottom: 15px;
          border-radius: 10px;
          overflow: hidden;
          .vider_playicon {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%);
            width: 36px;
            height: 36px;
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
			}
			.card {
				padding: 25px 15px;
				border-radius: 5px;
				background: white;
        margin-bottom: 80px;
				.title {
					@include flx-align-center;
					margin: 15px 0;
					color: #1a1a1a;
					font-size: 15px;
					font-weight: bold;
				}
				.card_item {
					.card_content {
						div {
							margin-bottom: 10px;

							span {
								display: inline-block;
								padding: 5px 10px;
								margin-right: 5px;
								font-size: 13px;
								line-height: 25px;
								background: #f7f7f7;
								border-radius: 8px;
							}
						}
						& :last-child {
							margin: 0;
						}
					}
				}
			}
		}
	}
}
</style>
